<template>
  <div class="content">
    <div class="fillInCont">
      <input
        title="收货人"
        placeholder="输入收货人"
        maxlength="9999"
        class="inputB"
        v-model="form.addressContact"
      >
      <input
        title="手机号码"
        placeholder="请输入手机号码"
        maxlength="11"
        class="inputB2"
        v-model="form.addressPhone"
      >
      <picker mode="region" @change="bindRegionChange">
        <input placeholder="选择地区" class="inputB2" v-model="region" disabled>
      </picker>
      <input
        title="详细地址"
        placeholder="请输入详细地址"
        maxlength="9999"
        class="inputB2"
        v-model="form.addressInfo"
      >
    </div>
    <div class="verificationBtn">
      <button
        class="handleClick"
        @click="handleClick"
        type="primary"
        shape="circle"
        size="small"
      >确认修改</button>
    </div>
  </div>
</template>

<script>
import { UPDATE_ORDER_API } from '@/api'

export default {
  components: {},
  data () {
    return {
      form: {},
      region: []
    }
  },
  onShow () {
    this.init()
  },
  computed: {
    account () {
      return this.$cookie.get('account')
    }
  },
  created () {},
  methods: {
    bindRegionChange (e) {
      this.region = e.target.value
      this.form.province = this.region[0]
      this.form.city = this.region[1]
      this.form.area = this.region[2]
    },
    handleClick () {
      const vm = this
      if (!vm.form.addressContact) {
        vm.$toast('收货人信息为空')
        return false
      } else if (!vm.form.addressPhone) {
        vm.$toast('手机号码为空')
        return false
      } else if (!vm.region) {
        vm.$toast('地区未选择')
        return false
      } else if (!vm.form.addressInfo) {
        vm.$toast('详细地址为空')
        return false
      } else {
        vm._updateOrderInfo()
      }
    },
    _updateOrderInfo () {
      const vm = this
      UPDATE_ORDER_API(vm.form)
        .then(r => {
          if (r.data.code === '0') {
            vm.$alert('修改信息成功', '').then(() => {
              this.$router.go(-1)
            })
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          vm.isLoading = false
          console.error(e)
        })
    },
    init () {
      const vm = this
      let shopInfo = JSON.parse(this.$root.$mp.query.shopInfo)
      vm.form = shopInfo
      vm.region[0] = vm.form.province
      vm.region[1] = vm.form.city
      vm.region[2] = vm.form.area
    }
  }
}
</script>

<style lang="scss">
@import 'static/styles/color.scss';

.content {
  width: 360px;
  margin: auto;
  .fillInCont {
    margin: auto;
    height: auto;
    box-shadow: 0 0 8px lighten($blue, 20%);
    transform: translateY(10px);
    .inputB {
      padding-top: 10px;
      background-color: transparent;
      font-size: 14px;
      color: #000;
      margin-left: 20px;
      height: 40px;
    }
    .inputB2 {
      padding-bottom: 10px;
      background-color: transparent;
      font-size: 14px;
      color: #000;
      margin-left: 20px;
      height: 40px;
    }
  }
  .verificationBtn {
    margin-top: 150px;
    .handleClick {
      border-radius: 25px;
      text-align: center;
      vertical-align: middle;
      touch-action: manipulation;
      cursor: pointer;
      background-image: none;
      white-space: nowrap;
      user-select: none;
      font-size: 14px;
      border: 0 !important;
      position: relative;
      text-decoration: none;
      height: 44px;
      line-height: 44px;
      box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
      color: #fff !important;
      margin: 10px;
      background: #626efd;
    }
  }
}
</style>

